<!-- 视图层 -->
<template>
  <div class='box'>
    <header class="header">
        <van-icon name="bars" />
        <van-search
         v-model="value"
         show-action
         shape="round"
         background="palevioletred"
         placeholder="请输入搜索关键词"
         @search="onSearch"
> 
  <template #action>
    <div @click="onClickButton">搜索</div>
  </template>
</van-search>
    </header>

    <MyBanner></MyBanner>
    <MyNav></MyNav>
    <hr>
    <MyGoodsList></MyGoodsList>
    <hr>
    <MyGoodsFa></MyGoodsFa>

  </div>
</template>

<!-- 逻辑层 -->
<script setup>
import MyBanner from './MyBanner.vue';
import MyGoodsFa from './MyGoodsFa.vue';
import MyGoodsList from './MyGoodsList.vue';
import MyNav from './MyNav.vue';


</script>


<!-- 样式层 -->
<style scoped>
 header{
    display: flex;
    position: sticky;
    top:0;
    z-index:1;
  }
  .van-icon{
    width: 45px;
    font-size: 35px;
    color: aliceblue;
    background-color: rgb(216, 112, 147);
    line-height: 55px;
    text-align: end;
  }
  .van-search{
      width: 330px;
  }
  hr{
    height: 10px;
    background-color: #ffe0e8;
  }
</style>
